<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 写了个公共类，把要导入的公共的文件写到一块，${ctx} -->		    
<%@include file="/WEB-INF/jsp/common/taglibs.jsp"%>        
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${ctx}/lib/bootstrap-3.3.7-dist/css/bootstrap.css" />
<script type="text/javascript" src="${ctx}/lib/jquery/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="${ctx}/lib/bootstrap-3.3.7-dist/js/npm.js" ></script>
<script type="text/javascript" src="${ctx}/lib/layer-v3.1.1/layer/layer.js" ></script>
<script type="text/javascript" src="${ctx}/lib/bootstrap-3.3.7-dist/js/mylayer.js" ></script>
</head>
<body>
	<form id="insert_form" action="${ctx}/banji/insert.action" method="post">
		班级：<input type="text" name="name" id="banjiName" onblur="checkName()"/><br/>
		人数：<input type="text" name="people"/><br/>
		教师：<input type="text" name="teatch"/><br/>
		课程：<select name="courseId">
				<option>--选择课程--</option>
				<c:forEach items="${list}" var="course">
					<option value="${course.id}">${course.name}</option>
				</c:forEach>
			</select><br/>
		<button type="button" onclick="submitForm()">添加</button>&nbsp;&nbsp;&nbsp;&nbsp;
		<button type="reset">重置</button>	
	</form>
	
	<script type="text/javascript">
		/* ajax请求是否重名 */
		function checkName(){
		var name = document.getElementById("banjiName").value;//拿到页面班级的名字
		$.post(
			"${ctx}/banji/checkName.action",
			{"name":name},
			function(data){
				if(data.isExist){
					mylayer.errorAlert("该班级已经存在，请重新添加新的班级");
				}
			},
			"json"
		);
	}
		
	function submitForm(){
		$.ajax({
			url :"${ctx}/banji/insert.action",
			type : "post",
			dataType :"json",
			data : $("#insert_form").serialize(),
			success : function(data){
				if(data){
					mylayer.success("添加成功");
					var index = parent.layer.getFrameIndex(window.name);
					setTimeout(function(){
						parent.layer.close(index);
						window.parent.location.reload();
					},800)
				} else {
					mylayer.errorMsg("添加失败");
				}
			}
		});
	}	
	</script>
</body>
</html>